import { createRouter, createWebHistory } from 'vue-router'
import LayoutIndex from '@/views/Layout/LayoutIndex.vue'
import LoginIndex from '@/views/Login/LoginIndex.vue'
import HomeIndex from '@/views/Home/HomeIndex.vue'
import CategoryIndex from '@/views/Category/CategoryIndex.vue' 
import SubCategoryIndex from '@/views/SubCategory/SubCategoryIndex.vue'
import DetailIndex from '@/views/Detail/DetailIndex.vue' 
import CartList from '@/views/CartList/CartList.vue'
import CheckOutIndex from '@/views/CheckOut/CheckOutIndex.vue'
import PayIndex from '@/views/Pay/PayIndex.vue'
import PayBack from '@/views/Pay/PayBack.vue'
import MemberIndex from '@/views/Member/MemberIndex.vue'
import UserInfo from '@/views/Member/components/UserInfo.vue'
import UserOrder from '@/views/Member/components/UserOrder.vue'
import { useUserStore } from '@/stores/userStore'
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      component: LayoutIndex,
      children: [
        {
          path: '',
          component: HomeIndex,
        },
        {
          path: '/category/:id',
          component: CategoryIndex,
        },
        {
          path: '/category/sub/:id',
          component: SubCategoryIndex,
        }
        ,{
          path: '/detail/:id',
          component: DetailIndex,
          // meta:{
          //   requiresAuth:true
          // }
        },
        {
          path: '/cartlist',
          component: CartList,
          // meta:{
          //   requiresAuth:true
          // }
        },
        {
          path: '/checkout',
          component: CheckOutIndex,
          // meta:{
          //   requiresAuth:true
          // }
        },
        {
          path: '/pay',
          component: PayIndex,
          meta:{
            requiresAuth:true
          }
        },
        {
          path: '/paycallback',
          component: PayBack,
          meta:{
            requiresAuth:true
          }
        },
        {
          path: '/member',
          component: MemberIndex,
          meta:{
            requiresAuth:true
          },
          children:[
            
            { path: '', 
              redirect: 'member/user' // 当访问 /member 时，重定向到 /member/user
            },
            {
              path:'user',
              component:UserInfo,
              meta:{
                requiresAuth:true
              }
            },
            {
              path:'order',
              component:UserOrder,
              meta:{
                requiresAuth:true
              }
            }
          ]
        }
      ]
    },
    {
      path: '/login',
      component: LoginIndex,
    }
  ],

  // 添加 scrollBehavior---->切换页面时从顶部开始
  scrollBehavior(to, from, savedPosition) {
    // 如果有保存的位置（比如浏览器前进后退）
    if (savedPosition) {
      return savedPosition
    }
    
    // 否则滚动到顶部
    return { top: 0 }
  }
  
})

// 登录访问拦截（路由守卫）-  只有登录页，可以未授权的时候访问，其他所有页面，都需要先登录再访问
// 根据返回值决定，是放行还是拦截（默认是直接放行）
// 返回值：
  //  1.  undefined / true  直接放行
  //  2.  false  拦回登录页
  //  3.  具体路径 或 路径对象  拦截到对应的地址   '/login' 或  {name:'login'}

  router.beforeEach((to)=>{
    
    const userStore=useUserStore()
    // 只有标记了 requiresAuth 的页面才需要登录
    if(to.meta.requiresAuth){
      // 如果没有token，且访问的是非登录页，则拦截到登录，其它情况正常放行
      // 如果用户在当前页需要登录，则登录后自动回到当前页，优化用户体验（使用redirect重定向）
      if(!userStore.userInfo.token && to.path !=='/login'){
        // 未登录时延时跳转,优化用户体验
        // ElMessage.warning('请先登录')
        // return `/login?redirect=${to.fullPath}`
        return new Promise((resolve) => {
        ElMessage.warning('请先登录')
        setTimeout(() => {
          resolve(`/login?redirect=${to.fullPath}`)
        }, 2000)
      })
     }
    }
    
    return true
  })

export default router
